<script setup lang="ts">
import VueEcharts from 'vue-echarts'
import type { GetTopTagDetailsResult, GetTopTagTotalResultItem } from '../composable'
import type { VChartInstance } from '@/types'
import { useChartAutoResize } from '@/mixins/MixinChartAutoResize'

const props = defineProps<{
  data: GetTopTagDetailsResult
  modelName: string
}>()
const designStore = useDesignStore()
const unit = computed(() => {
  const d = (props.data.tagDataList[0] || {}) as GetTopTagTotalResultItem
  return d?.unit || ''
})
const option = computed(() => {
  return {
    title: {
      text: `${props.modelName}分析`,
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
      },
      left: 20,
      top: 20,
    },
    legend: {
      right: 30,
      top: 45,
      type: 'scroll',
    },
    grid: {
      left: 40,
      right: 40,
      top: 80,
      bottom: 30,
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
    },
    xAxis: { type: 'category' },
    yAxis: { type: 'value', name: unit.value, nameTextStyle: { align: 'left' } },
    series: [
      { type: 'line', name: '本期值', smooth: false, areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#fc97af', // 0% 处的颜色
          }, {
            offset: 1,
            color: '#f7c5d1', // 100% 处的颜色
          }],
          global: false, // 缺省为 false
        },
      } },
      { type: 'line', name: '同期值', smooth: false },
      { type: 'line', name: '上期值', smooth: false },
    ],
    dataset: {
      source: [
        ['周期', '本期值', '同期值', '上期值'],
        ...(props.data.rowData || []).map((item) => {
          const d = (props.data.tagDataList.find(v => v.name === item) || {}) as GetTopTagTotalResultItem
          return [
            item,
            d.indicatorData?.val,
            d.indicatorData?.yoyVal,
            d.indicatorData?.momVal,
          ]
        }),
      ],
    },
  }
})

const chartRef = ref<VChartInstance>()

useChartAutoResize(chartRef)
</script>

<template>
  <VueEcharts ref="chartRef" :option="option" :theme="designStore.theme" />
</template>
